<div class="archives-educate">
  <h2 class="title text-center pt-3 pb-3 text-littleGray">四级HSE教育培训台账</h2>
  <div class="header pt-2 pb-2">
    <div class="ui-inputgroup">
<!--      <input type="text" pInputText placeholder="搜索"/>-->
<!--      <button pButton type="button" icon="pi pi-search" class="ui-button-warn"></button>-->
    </div>
    <div class="button">
      <button pButton type="button" label="新增台账" class="ui-button-rounded" (click)="educateOperate(educateOperateFlag = 'add')"></button>
      <button pButton type="button" label="文件导入" class="ui-button-rounded ui-button-darkPrimary ml-2 mr-2" (click)="educateImportFieldModal=true"></button>
      <button pButton type="button" label="文件导出" class="ui-button-rounded ui-button-pink" (click)="educateOperate(educateOperateFlag = 'export')"></button>
    </div>
  </div>
  <div class="content">
    <p-table
      [value]="educateTableData" [columns]="educateTableHeader"
      [scrollable]="true" scrollHeight="90%"
    >
      <ng-template pTemplate="header" let-columns>
        <tr>
          <th>序号</th>
          <th *ngFor="let col of columns">
            {{col.header}}
          </th>
          <th>操作</th>
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-rowData let-columns="columns" let-rowIndex="rowIndex">
        <tr>
          <td>{{rowIndex + 1}}</td>
          <td *ngFor="let col of columns" style="overflow: hidden;text-overflow: ellipsis" [pTooltip]="rowData[col.field]">
            {{rowData[col.field]}}
          </td>
          <td>
            <button pButton label="详情" class="ui-button-rounded mr-3" (click)="educateOperate(educateOperateFlag='update',rowData)"></button>
            <button pButton label="删除" class="ui-button-rounded ui-button-pink" (click)="educateOperate(educateOperateFlag='del',rowData)"></button>
          </td>
        </tr>
      </ng-template>
    </p-table>
  </div>
  <div class="pagination">
    <app-pagination [option]="educatePageOption" (clickEvent)="educatePageEvent($event)"></app-pagination>
  </div>
  <div class="modal">
    <!--角色新增/编辑弹窗-->
    <p-dialog
      [modal]="true"
      [blockScroll]="true"
      [(visible)]="educateOperateModal" [style]="{width: '50vw'}"
    >
      <p-header>{{educateOperateFlag === 'update' ? '台账编辑' : '台账添加'}}</p-header>
      <div style="width: 100%;height: 65vh;">
        <p-scrollPanel [style]="{width: '100%', height: '65vh'}" styleClass="role-scroll">
          <div class="ui-g" *ngIf="!(educateOperateField.id)">
            <!--身份证-->
            <div class="ui-g-6 ui-md-6">
              <label class="ui-g-4 ui-md-4 label">
                <span>身份证：</span>
              </label>
              <div class="ui-g-8 ui-md-8 input">
                <input type="text" pInputText placeholder="请填写身份证" [formControl]="idCard" (change)="idCardChange($event)" [(ngModel)]="educateOperateField.idCardNo">
                <span [hidden]="idCardIsValid" style="color: red">身份证号无效</span>
              </div>
            </div>
            <!--组织名-->
            <div class="ui-g-6 ui-md-6">
              <label class="ui-g-4 ui-md-4 label">
                <span>组织名：</span>
              </label>
              <div class="ui-g-8 ui-md-8 input">
                <input type="text" pInputText placeholder="请填组织名" [(ngModel)]="educateOperateField.organizationName">
              </div>
            </div>
          </div>
          <div class="ui-g">
            <!--公司培训时间-->
            <div class="ui-g-6 ui-md-6">
              <label class="ui-g-4 ui-md-4 label">
                <span>公司培训时间：</span>
              </label>
              <div class="ui-g-8 ui-md-8 input">
                <input type="text" pInputText placeholder="点击选择时间" [(ngModel)]="educateOperateField.companyEducationTime">
<!--                <p-calendar-->
<!--                  #calendarStart-->
<!--                  placeholder="点击选择时间......"-->
<!--                  [locale]="educateEs" [(ngModel)]="educateOperateField.companyEducationTime"-->
<!--                  dateFormat="yy-mm-dd"-->
<!--                  dataType="string"-->
<!--                  [monthNavigator]="true"-->
<!--                  [yearNavigator]="true"-->
<!--                  yearRange="2017:2030">-->
<!--                </p-calendar>-->
              </div>
            </div>
            <!--公司培训成绩-->
            <div class="ui-g-6 ui-md-6">
              <label class="ui-g-4 ui-md-4 label">
                <span>公司培训成绩：</span>
              </label>
              <div class="ui-g-8 ui-md-8 input">
                <input type="text" pInputText placeholder="请填公司培训成绩" [(ngModel)]="educateOperateField.companyFraction">
              </div>
            </div>
            <!--工厂培训时间-->
            <div class="ui-g-6 ui-md-6">
              <label class="ui-g-4 ui-md-4 label">
                <span>工厂培训时间：</span>
              </label>
              <div class="ui-g-8 ui-md-8 input">
                <input type="text" pInputText placeholder="点击选择时间" [(ngModel)]="educateOperateField.factoryEducationTime">
<!--                <p-calendar-->
<!--                  #calendarStart-->
<!--                  placeholder="点击选择时间......"-->
<!--                  [locale]="educateEs" [(ngModel)]="educateOperateField.factoryEducationTime"-->
<!--                  dateFormat="yy-mm-dd"-->
<!--                  dataType="string"-->
<!--                  [monthNavigator]="true"-->
<!--                  [yearNavigator]="true"-->
<!--                  yearRange="2017:2030">-->
<!--                </p-calendar>-->
              </div>
            </div>
            <!--工厂培训成绩-->
            <div class="ui-g-6 ui-md-6">
              <label class="ui-g-4 ui-md-4 label">
                <span>工厂培训成绩：</span>
              </label>
              <div class="ui-g-8 ui-md-8 input">
                <input type="text" pInputText placeholder="请填写工厂培训成绩" [(ngModel)]="educateOperateField.factoryFraction">
              </div>
            </div>
            <!--车间培训时间-->
            <div class="ui-g-6 ui-md-6">
              <label class="ui-g-4 ui-md-4 label">
                <span>车间培训时间：</span>
              </label>
              <div class="ui-g-8 ui-md-8 input">
                <input type="text" pInputText placeholder="点击选择时间" [(ngModel)]="educateOperateField.workshopEducationTime">
<!--                <p-calendar-->
<!--                  #calendarStart-->
<!--                  placeholder="点击选择时间......"-->
<!--                  [locale]="educateEs" [(ngModel)]="educateOperateField.workshopEducationTime"-->
<!--                  dateFormat="yy-mm-dd"-->
<!--                  dataType="string"-->
<!--                  [monthNavigator]="true"-->
<!--                  [yearNavigator]="true"-->
<!--                  yearRange="2017:2030">-->
<!--                </p-calendar>-->
              </div>
            </div>
            <!--车间培训成绩-->
            <div class="ui-g-6 ui-md-6">
              <label class="ui-g-4 ui-md-4 label">
                <span>车间培训成绩：</span>
              </label>
              <div class="ui-g-8 ui-md-8 input">
                <input type="text" pInputText placeholder="请填写车间培训成绩" [(ngModel)]="educateOperateField.workshopFraction">
              </div>
            </div>
            <!--班组培训时间-->
            <div class="ui-g-6 ui-md-6">
              <label class="ui-g-4 ui-md-4 label">
                <span>班组培训时间：</span>
              </label>
              <div class="ui-g-8 ui-md-8 input">
                <input type="text" pInputText placeholder="点击选择时间" [(ngModel)]="educateOperateField.classEducationTime">
<!--                <p-calendar-->
<!--                  #calendarStart-->
<!--                  placeholder="点击选择时间......"-->
<!--                  [locale]="educateEs" [(ngModel)]="educateOperateField.classEducationTime"-->
<!--                  dateFormat="yy-mm-dd"-->
<!--                  dataType="string"-->
<!--                  [monthNavigator]="true"-->
<!--                  [yearNavigator]="true"-->
<!--                  yearRange="2017:2030">-->
<!--                </p-calendar>-->
              </div>
            </div>
            <!--班组培训成绩-->
            <div class="ui-g-6 ui-md-6">
              <label class="ui-g-4 ui-md-4 label">
                <span>班组培训成绩：</span>
              </label>
              <div class="ui-g-8 ui-md-8 input">
                <input type="text" pInputText placeholder="请填写班组培训成绩" [(ngModel)]="educateOperateField.classFraction">
              </div>
            </div>
          </div>
        </p-scrollPanel>
      </div>
      <p-footer>
        <button pButton label="保存" (click)="educateOperate(educateOperateFlag = 'save')"></button>
        <button pButton label="取消" class="ui-button-pink" (click)="educateOperateModal = false"></button>
      </p-footer>
    </p-dialog>
    <!--文件导入弹窗-->
    <p-dialog
      [blockScroll]="true"
      [(visible)]="educateImportFieldModal" [style]="{width: '50vw'}"
    >
      <p-header>导入四级HSE教育培训台账</p-header>
      <div style="width: 100%;height: 30vh;overflow: hidden">
        <p-scrollPanel [style]="{width: '100%', height: '100%'}" styleClass="role-scroll">
          <div class="ui-g">
            <!--选择文件-->
            <div class="ui-g-12 ui-md-12">
              <label class="ui-g-4 ui-md-4 label">
                <span>请选择文件（<span class="text-danger">只能是excel文档）</span>：</span>
              </label>
              <div class="ui-g-8 ui-md-8 input">
                <p-fileUpload
                  chooseLabel="点击选择上传文件" cancelLabel="清空" accept=".xlsx,.xls"
                  [showUploadButton]="false" mode="advanced" name="file" #fileUpload
                >
                </p-fileUpload>
              </div>
            </div>
          </div>
        </p-scrollPanel>
      </div>
      <p-footer>
        <button pButton label="保存" (click)="educateOperate(educateOperateFlag = 'import',fileUpload)"></button>
        <button pButton label="取消" class="ui-button-pink" (click)="educateImportFieldModal = false"></button>
      </p-footer>
    </p-dialog>
  </div>
  <app-upload-file-record [uploadRecordOption]="educateUploadRecordOption"></app-upload-file-record>
</div>
